<!--
 * @description: 功能
 * @author: Yoke
 * @Date: 2024-08-28 21:08:58
-->
<script setup lang="ts">
import upload from "@/components/upload.vue";
import { NavigateNextRound } from '@vicons/material';
import { FormInst, NButton, NForm } from 'naive-ui';
import { inject, onMounted, provide, reactive, ref, toRefs, watch } from 'vue';
import { rules2 } from "./index.ts";
import EquipmentSituation from "./table/EquipmentSituation.vue";
import SeismicResistanceTable from './table/SeismicResistanceTable.vue';
const formRef = ref<FormInst | null>(null)

const state = reactive<{
    model: any
}>({
    model: {
        "table2": [{ "key": 1, "c3": "121", "c4": "212" }], "wy": [{ "key": 0, "name": "1212", "hardware": "服务器AB345A1", "nature": "新建", "cabinet": "600×1100×2200（新增机柜）", "num": "2", "power": "1800", "col": [0, 2], "manufactor": "某司", "uuid": 1001 }, { "key": 1, "name": "", "hardware": "交换机ABX123456X-12DU-SD", "nature": "新建", "cabinet": "600×1100×2200（新增机柜）", "num": "2", "power": "1800", "manufactor": "某司", "uuid": 1001 }, { "key": 2, "name": "", "hardware": "防火墙LEabcsEF2000-AB-CD", "nature": "新建", "cabinet": "600×1100×2200（新增机柜）", "num": "2", "power": "1800", "manufactor": "某司", "uuid": 1001 }], "f16": [{ "id": "02501825", "batchId": "a11791f8", "name": "737f3b4e1fe84ba489fe34e2ea88f909.png", "status": "pending", "percentage": 0, "file": {}, "url": null, "type": "image/png", "thumbnailUrl": null, "fullPath": "/737f3b4e1fe84ba489fe34e2ea88f909.png" }]
    }
})


const { model: formValue } = toRefs(state)
provide('formValue', state.model)

const steps = inject('steps') as any
const machine_room_nameRef = ref()
watch(() => steps, (newVal) => {
    machine_room_nameRef.value = newVal?.data?.value?.step1?.f5;
}, { deep: true })

const nextStep = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
            console.log(state.model)
            steps.setData({
                step2: state.model
            })
            steps.next()
        }
    })
}

const prevStep = () => {
    steps.prev()
}

</script>
<template>
    <div>
        <NForm :model="formValue" ref="formRef" :rules="rules2" require-mark-placement="left">
            <n-card title="设备情况" class="mt-4">
                <div class="text-lg">
                    本工程在 {{ machine_room_nameRef }} 建设 {{ formValue?.f11 ?? 1 }}
                    套固定资产设备（含2台服务器、2台交换机、2台防火墙），本工程采用甲方公司设备。 </div>
                <div class="text-lg indent-[2em] mt-3">
                    机架数量、设备尺寸及供电要求可参见下表：
                </div>
                <EquipmentSituation v-model:value="formValue.wy" />
            </n-card>
            <n-card title="机房情况" class="mt-4">
                <n-grid x-gap="12" :cols="5">
                    <n-gi>
                        <n-form-item label="机房平面布置图" path="f16">
                            <upload v-model:value="formValue.f16" />
                        </n-form-item>
                    </n-gi>
                </n-grid>
            </n-card>
            <n-card title="本工程所属区域抗震设防烈度表" class="mt-4">
                <SeismicResistanceTable v-model:value="formValue.table2" />
            </n-card>
        </NForm>
        <n-space>
            <NButton type="primary" @click="prevStep" class="my-4">
                上一步
                <template #icon>
                    <NIcon class="rotate-180">
                        <NavigateNextRound />
                    </NIcon>
                </template>
            </NButton>
            <NButton type="primary" icon-placement="right" @click="nextStep" class="my-4">
                下一步
                <template #icon>
                    <NIcon>
                        <NavigateNextRound />
                    </NIcon>
                </template>
            </NButton>
        </n-space>
    </div>
</template>